<template>
  <n-space class="comments" vertical :size="[25, 10]">
    <n-space>
      <n-avatar round :size="48" :src="avatar" />
      <n-space vertical>
        <n-space>
          <span>{{ name }}</span>
          <span>{{ browser }}</span>
          <span>{{ system }}</span>
        </n-space>
        <n-space>
          <span>{{  $dayjs(time).locale("zh-cn").fromNow() }}</span>
          <n-button @click="reply" text> 回复</n-button>
        </n-space>
        <n-space>
          <slot name="contentLeft" />
          <p>{{ content }}</p>
        </n-space>
      </n-space>
    </n-space>
    <n-space class="child" vertical>
      <slot />
    </n-space>
  </n-space>
</template>

<script setup lang="ts">
import { NSpace, NButton, NAvatar } from "naive-ui";
import 'dayjs/locale/zh-cn'
const props = defineProps({
  name: {
    type: String,
  },
  browser: {
    type: String,
  },
  system: {
    type: String,
  },
  time: {
    type: Date,
  },
  content: {
    type: String,
  },
  avatar: {
    type: String,
  },
});
const { name, browser, system, time, content, avatar } = props;
const emit = defineEmits(["reply"]);
const reply = () => {
  emit("reply");
};
</script>
<style lang="scss" scoped>
.comments {
  border-top: 2px solid #ccc;
  padding-top: 20px;
}
.child {
  margin-left: 50px;
}
</style>
